<?php

$doc = document::getInstance();

config::getInstance()->sitename = "beta.vdjo.com - Music Video Mixer (preview)";

$doc->addJQueryUI();
$doc->addJQuery();

$doc->addJS("styles/js/swfobject.js");

// additional javascript
$doc->addJS("templates/mixer/js/check.js");
$doc->addJS("templates/mixer/js/config.js");
$doc->addJS("templates/mixer/js/bind.js");
$doc->addJS("templates/mixer/js/player.js");
$doc->addJS("templates/mixer/js/hash.js");
$doc->addJS("templates/mixer/js/share.js");
// more scripts are lazily loaded in show.js
 
if (request::get("test")) {
	$req = new request(array("module" => "testpanel", "action" => "test", "format" => "html"));
	module::load($req);
} ?>
<div id="logo"><img src="/theme/<?php echo prefs::getInstance()->getPref("theme"); ?>/images/logo.png" width="283" height="97" alt="vdjo.com" /></div>
<div id="wrapper">
	<div id="wrapper-upper"></div>
	<div id="wrapper-center">
		<a id="button-autodj" href="javascript:void(0);"></a>
		<div id="contents" class="loading">
			<div id="videos">
				<div id="vid0-wrapper" class="idle">
					<div id="vid0-title" class="pause"><span></span> <a href="javascript:void(0);" class="invisible">edit</a></div>				
					<div id="vid0-window">
						<div id="vid0-object"></div>
						<div id="vid0-overlay"></div>
						<div id="vid0-actions-bg"></div>
						<div id="vid0-actions">
							<div class="enhance">	
								<span class="actions-title">Enhance this video</span>						
								<a href="javascript:void(0);" class="enhance-save">save</a>
								<a href="javascript:void(0);" class="enhance-cancel">cancel</a>
								<span class="enhance-labels">artist<br/>title<br/>flags</span>
								<span class="enhance-fields">
									<input type="text" size="23" class="enhance-artist" value="" /><br/>
									<input type="text" size="23" class="enhance-title" value="" />
								</span>
								<span class="enhance-flags">
									<a href="javascript:void(0);" class="enhance-bad">bad quality</a>
									<a href="javascript:void(0);" class="enhance-live">live</a>
									<a href="javascript:void(0);" class="enhance-nomusic">no music</a>
								</span>
							</div>
							<div class="share">
								<span class="actions-title">Share this video</span>
								<a href="javascript:void(0);" class="share-hide">hide</a>
								<div class="addthis">
                                    <a class="facebook">
                                        <img src="/images/social/facebook-32x32.png" width="32" height="32" alt="Facebook" />
                                    </a>
                                    <a class="myspace">
                                        <img src="/images/social/myspace-32x32.png" width="32" height="32" alt="Myspace" />
                                    </a>
                                    <a class="google">
                                        <img src="/images/social/google-32x32.png" width="32" height="32" alt="Google" />
                                    </a>
                                    <a class="twitter">
                                        <img src="/images/social/twitter-32x32.png" width="32" height="32" alt="Twitter" />
                                    </a>
                                    <a class="delicious">
                                        <img src="/images/social/delicious-32x32.png" width="32" height="32" alt="Delicious" />
                                    </a>
                                    <a class="blogger">
                                        <img src="/images/social/blogger-32x32.png" width="32" height="32" alt="Blogger" />
                                    </a>
                                    <a class="live">
                                        <img src="/images/social/live-32x32.png" width="32" height="32" alt="Live" />
                                    </a>
								</div>
							</div>
							<div class="fav"></div>
							<div class="download"></div>
						</div>
						<div id="vid0-enhance-button"><a href="javascript:void(0);"></a></div>
						<div id="vid0-share-button"><a href="javascript:void(0);"></a></div>
						<div id="vid0-fav-button"><a href="javascript:void(0);"></a></div>
						<div id="vid0-download-button"><a href="javascript:void(0);"></a></div>
					</div>
				</div>
				<div id="vid1-wrapper" class="idle">
					<div id="vid1-title" class="pause"><span></span> <a href="javascript:void(0);" class="invisible">edit</a></div>
					<div id="vid1-window">
						<div id="vid1-object"></div>
						<div id="vid1-overlay"></div>
						<div id="vid1-actions-bg"></div>
						<div id="vid1-actions">							
							<div class="enhance">							
								<a href="javascript:void(0);" class="enhance-save">save</a>
								<a href="javascript:void(0);" class="enhance-cancel">cancel</a>
								<span class="enhance-labels">artist<br/>title<br/>flags</span>
								<span class="enhance-fields">
									<input type="text" size="23" class="enhance-artist" value="" /><br/>
									<input type="text" size="23" class="enhance-title" value="" />
								</span>
								<span class="enhance-flags">
									<a href="javascript:void(0);" class="enhance-bad">bad quality</a>
									<a href="javascript:void(0);" class="enhance-live">live</a>
									<a href="javascript:void(0);" class="enhance-nomusic">no music</a>
								</span>
							</div>
							<div class="share">
								share
							</div>
							<div class="fav">
								share
							</div>
							<div class="download">
								share
							</div>
						</div>
						<div id="vid1-enhance-button"><a href="javascript:void(0);"></a></div>
						<div id="vid1-share-button"><a href="javascript:void(0);"></a></div>
						<div id="vid1-fav-button"><a href="javascript:void(0);"></a></div>
						<div id="vid1-download-button"><a href="javascript:void(0);"></a></div>
					</div>
				</div>
				<div id="autodj-controls">
					<a href="javascript:void(0);" class="autodj-next0 disabled"></a>
					<a href="javascript:void(0);" class="autodj-next1 disabled"></a>
					<a href="javascript:void(0);" class="autodj-mix disabled"></a>
					<div id="autodj-next0-label"><span></span></div>
					<div id="autodj-next1-label"><span></span></div>
				</div>
			</div>
			<div class="clear"></div>
			<div id="controls">
				<div id="vid0-pp-button-fx"></div>
				<div id="vid0-pp-button" class="play"><a href="javascript:void(0);"></a></div>
				<div id="vid0-time">-0:00</div>				
				<div id="vid0-slider">
					<div id="vid0-slider-bar"></div>
					<div id="vid0-slider-buffer"></div>
				</div>
				<div id="fader-bar"></div>
				<div id="fader-container"></div>
				<div id="vid1-slider">
					<div id="vid1-slider-bar"></div>
					<div id="vid1-slider-buffer"></div>
				</div>
				<div id="vid1-time">-0:00</div>
				<div id="vid1-pp-button-fx"></div>
				<div id="vid1-pp-button" class="play"><a href="javascript:void(0);"></a></div>
			</div>
			<div id="side-wrapper">
				<div id="side">
					<div id="tabs-side">
						<a id="tab-np" href="javascript:void(0);"></a>
					</div>					
					<div id="np"></div>
				</div>
			</div>
			<div id="main">
				<div id="tabs-main">
					<?php if (!empty( $doc->contents["info"] )) { ?>
						<a id="tab-info" href="javascript:void(0);"></a>
					<?php } ?>
					<a id="tab-search" href="javascript:void(0);"></a>
					<a id="tab-playlist" href="javascript:void(0);"></a>
				</div>
				<div id="tabs-wrapper">
					<?php if (!empty( $doc->contents["info"] )) { ?>
						<div id="info" class="tab">
							<?php echo $doc->contents["info"]; ?>
						</div>
					<?php } ?>
					<div id="search" class="tab">
						<?php $req = new request(
							array("module" => "mixer", "action" => "search", "format" => "html"));
							module::load($req); ?>
					</div>
					<div id="playlist" class="tab">
						<?php $req = new request(
							array("module" => "mixer", "action" => "lists", "format" => "html"));
							module::load($req); ?>
					</div>
				</div>
			</div>				
			<div class="clear"></div>
			<?php $req = new request(
				array("module" => "sitemap", "action" => "show", "format" => "html"));
				module::load($req); ?>			
			<div id="contents-loading"><p>vdjo.com is loading...</p></div>
		</div>
	</div>
	<div id="wrapper-lower"></div>
</div>
<div id="theme-outer"><div id="theme-inner"></div></div>

<div id="launcher">
	<div id="launcher-manual">
		<img class="title" src="/images/launcher_manual.png" width="190" height="60" alt="Manual" /><br/>
		<img class="arrow" src="/images/arrow.png" width="54" height="60" alt="" />
		<a href="javascript:void(0);"></a>
	</div>	
	<div id="launcher-autodj">
		<img class="title" src="/images/launcher_autodj.png" width="190" height="60" alt="AutoDJ" /><br/>
		<img class="arrow" src="/images/arrow.png" width="54" height="60" alt="" />
		<div id="launcher-with">
			<span>Start with music like:</span>
			<div id="launcher-field"><input type="text" size="20" value="" /></div>
			<div id="launcher-button"></div>
		</div>
		<div id="launcher-playlist">
			<span>Or choose a genre:</span>
			<?php $req = new request(
				array("module" => "playlist", "action" => "featuredList", "format" => "html"));
				module::load($req); ?>
		</div>	
		<div id="launcher-wait">
			<br/><br/>
			<img src="/theme/vdjo_light/images/video-loader.gif" width="32" height="32" alt="" /><br/><br/>
			<span>Please wait...</span>
		</div>
	</div>
	<span class="disclaimer">icons by <a href="http://dryicons.com/">DryIcons</a> || <a href="http://nandostudio.com/">nando</a></span>
</div>

<iframe id="download"></iframe>

<?php $req = new request(array("module" => "mixer", "action" => "recent", "format" => "html"));
module::load($req); ?>